<template>
  <el-dialog :visible.sync="visible" width="28%" top="25vh" :show-close="false" @closed="onClosed">
    <el-tabs style="padding-bottom:30px;">
      <el-tab-pane label="用户登录">
        <el-form label-position="top" label-width="70px" style="margin-top:10px;">
          <el-form-item label>
            <el-input
              v-model="loginData.username"
              @keyup.enter.native="handleLogin"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label>
            <el-input
              v-model="loginData.password"
              @keyup.enter.native="handleLogin"
              show-password
              placeholder="请输入登录密码"
            ></el-input>
          </el-form-item>
          <div>
            <el-button id="btn" type="primary" @click="handleLogin" style="width:100%">立即登录</el-button>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="用户注册">
        <el-form label-position="top" label-width="70px" style="margin-top:10px;">
          <el-form-item label>
            <el-input
              v-model="registerData.username"
              @keyup.enter.native="handleRegister"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label>
            <el-input
              v-model="registerData.password"
              @keyup.enter.native="handleRegister"
              placeholder="请输入登录密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label>
            <el-input
              v-model="password1"
              @keyup.enter.native="handleRegister"
              placeholder="请确认登录密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label>
            <el-input
              v-model="registerData.share_code"
              @keyup.enter.native="handleRegister"
              placeholder="请输入邀请码"
            ></el-input>
          </el-form-item>
          <el-button id="btn" type="primary" @click="handleRegister" style="width:100%">立即注册</el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { log } from "util";
import { setTimeout } from "timers";
export default {
  name: "pane",
  data: function() {
    return {
      password1: "",
      loginData: {
        username: "",
        password: ""
      },
      registerData: {
        username: "",
        password: "",
        share_code: ""
      }
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleLogin() {
      this.$store
        .dispatch("user_login", this.loginData)
        .then(res => {
          this.visible = false;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },

    handleRegister() {
      if (this.registerData.username == "") {
        this.$message.error("用户名不能为空！");
        return;
      }

      if (this.registerData.password != this.password1) {
        this.$message.error("两次密码输入不一样！");
        return;
      }
      this.$store
        .dispatch("user_register", this.registerData)
        .then(res => {
          this.$message({
            message: "注册成功！",
            type: "success"
          });
          this.registerData = {
            username: "",
            password: "",
            share_code: ""
          };
          this.password1 = "";
          this.visible = false;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },

    onClosed() {
      this.$emit("close", false);
    }
  },

  mounted() {
    // 初始化tabs
  }
};
</script>

<style scoped>
</style>
    

